<template>
    <div id="login">
       <el-form :model="form" label-width="120px">
    <el-form-item label="用户名">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.pwd" />
    </el-form-item>
    <el-form-item>
      <el-button size="large" type="primary" @click="onSubmit">登录</el-button>
    </el-form-item>
  </el-form>
    </div>
</template>
<script setup>
  import { reactive } from 'vue';
  import { useRouter } from 'vue-router';
  const { push } = useRouter();
  const form = reactive({
    name: '',
    pwd: ''
  })
  const onSubmit = () => { // 登录的函数
    if (form.name && form.pwd){
      push('/');
    }
  }
</script>
<style lang="scss" scoped>
#login{
  height: 100%;
  background: skyblue;
  overflow: hidden;
}
.el-form {
  width: 500px;
  margin: 200px auto;
}
.el-button{
  width: 100%;
}
</style>


